import React from 'react';
import AreaPicker from '@/components/Common/AreaPicker';

const Profile = () => {
    const [form] = React.UI.Form.useForm()

    //地区显示或者隐藏
    var [area, SetArea] = React.useState(false)

    //组装表单数据
    var [bus, SetBus] = React.useState({
        nickname: React.Business.nickname,
        mobile: React.Business.mobile,
        password: React.Business.password,
        email: React.Business.email ? React.Business.email : '',
        gender: React.Business.gender,
        avatar: {},
        code: React.Business.district ? React.Business.district : null,
        region_text: React.Business.region_text ? React.Business.region_text : ''
    })


    // 点击确认后返回的数据
    const AreaConfirm = async (val: any, list: any) => {
        var code = ''

        for (var k = val.length; k >= 0; k--) {
            if (val[k]) {
                code = val[k].toString()
                break;
            }
        }
        var region_text = ''

        if (list[0]) region_text += `${list[0]}`
        if (list[1]) region_text += `-${list[1]}`
        if (list[2]) region_text += `-${list[2]}`

        form.setFieldsValue({
            region_text: region_text,
            code: code
        })
    }
    
// 文件上传
    var [avatar, SetAvatar] = React.useState([{
        url: React.Business.avatar_text
    }])
    const DelAvatar = () => {
        SetAvatar([])
    }

    const upload = async (file: any) => {
        React.Business.avatar = file

        return {
            url: URL.createObjectURL(file),
        }
    }

    const profile = async (values: any) => {
        //组装数据
        values.id = React.Business.id

        //头像
        if (React.Business.avatar) {
            values.avatar = React.Business.avatar
        }
        if (form.getFieldValue('code')) {
            values.code = form.getFieldValue('code')
        }

        if (!values.password) delete values.password

        //请求接口
        var result = await React.HTTP.upload('/business/profile', values);

        if (result.code == 0) {
            React.UI.Toast.show({
                icon: 'fail',
                content: result.msg
            })
        } else {
            React.UI.Toast.show({
                icon: 'success',
                content: result.msg,
            })
            React.SetBusiness(result.data)
            React.Cookie.save('business', result.data)
            React.navigate(-1)
        }
    }

    return (
        <>
            <React.UI.NavBar onBack={() => React.navigate(-1)}>基本资料</React.UI.NavBar>

            <AreaPicker visible={area} onClose={() => {SetArea(false)}} 
                        onConfirm={AreaConfirm} 
                        province={React.Business.province} 
                        city={React.Business.city}
                        district={React.Business.district}/>

            <React.UI.Form
               form={form}
                name='form'
                onFinish={profile}
                layout='horizontal'
                mode='card'
                initialValues={bus}
                footer={
                    <React.UI.Button block type='submit' color='primary' size='large'>
                        提交修改
                    </React.UI.Button>
                }
            >
                {/* 文件上传 */}
                <React.UI.AutoCenter style={{ margin: '30px 0px' }}>
                    <React.UI.ImageUploader value={avatar} maxCount={1} onDelete={DelAvatar} upload={upload} onChange={SetAvatar} />
                </React.UI.AutoCenter>

                <React.UI.Form.Item name="nickname" label="昵称" rules={[{ required: true }]}>
                    <React.UI.Input placeholder="请输入昵称" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="mobile" label="手机号" rules={[{ required: true }, { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对' }]}>
                    <React.UI.Input placeholder="请输入手机号" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="password" label="密码">
                    <React.UI.Input type="password" placeholder="请输入密码" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="email" label="邮箱" rules={[{ required: true }, { pattern: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/, message: '邮箱格式不对' }]}>
                    <React.UI.Input placeholder="请输入邮箱" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="gender" label="性别" rules={[{ required: true }]}>
                    <React.UI.Radio.Group>
                        <React.UI.Space direction='vertical'>
                            <React.UI.Radio value='0'>保密</React.UI.Radio>
                            <React.UI.Radio value='1'>男</React.UI.Radio>
                            <React.UI.Radio value='2'>女</React.UI.Radio>
                        </React.UI.Space>
                    </React.UI.Radio.Group>
                </React.UI.Form.Item>
                
                <React.UI.Form.Item name="region_text" label="地区" onClick={() => SetArea(true)}>
                    <React.UI.Input placeholder="请选择地区" readOnly />
                </React.UI.Form.Item>

                <React.UI.Form.Header />

            </React.UI.Form>
        </>
    )
}

export default Profile